<template>
    <div>
        <span>系统管理</span>
        <span>用户管理</span>
        <p>{{ count }}</p>
        <button @click="checkEvent">修改</button>
        <p>{{ data }}</p>
        <h3>仓库数据</h3>
        <p>{{ userStoreData.count }}</p>
        <p>{{ userStoreData.user.length }}</p>
        <button @click="incre">+</button>
        <button @click="decre">-</button>
        <input type="text" v-focus="'pink'">
        <input type="password" v-focus="'blue'">
    </div>
</template>

<script lang='ts' setup>

import { BData } from "@/types/homeInterface"
import { userStore } from "@/store/userStore"
// import { inputEmits } from "element-plus";

const userStoreData = userStore()
console.log(userStoreData);
console.log(userStoreData.count);

const incre = () => {
    userStoreData.increment(100)
}
const decre = () => {
    userStoreData.decrement(20)
}


//Vue3中组件默认提供一个函数，这个函数接受外部props
const props = defineProps<{ count: number, data: Array<BData> }>()
// 接受父组件自定义事件,约束了你们接受参数
const $emit = defineEmits<{
    (e: "myEvent", val: number): void,
    (e: "myEvent2", val: string): void
}>()

const checkEvent = () => {
    // this.$emit("myEvent",20)
    $emit("myEvent", 20)
}



onMounted(() => {
    console.log(props);
    console.log(props.count);
    userStoreData.asyncFindUser()
})

/**
 * 定义一个变量，这个变量v开头，Vue3默认就能将他加载为自定义指令
 */
const vFocus = {
    //当前指令对应节点，被挂载后，代码才生效
    mounted: (el:any,bind:any) => {
        el.focus()
        el.style.backgroundColor=bind.value
        // console.log(bind.value);
        
    }
}
// // v-bgcolor="'red'"
// const vBgcolor = {
//     mounted() {
        
//     },
// }



</script>

<style lang='scss' scoped></style>